<template>
  <div class="swiper-container">
    <div class="swiper-wrap">
      <img :class="['swiper-slide', current === getIndex(index) ? 'swiper-slide-active' : '' , current === getIndex(index) + 1 || current === getIndex(index) - 1 ? 'swiper-slide-active-slib' : '']" v-for="(item, index) in real" :key="index" :src="item" alt="">
    </div>
    <div class="prev-btn" @click="prev"><</div>
    <div class="next-btn" @click="next">></div>
  </div>

</template>

<script>
    export default {
        name: "CustomSwiper",
        data () {
          return {
            pics: [
              'http://fe.code.lianyouapp.com/app/blind-date-article/img/pic.png',
              'http://fe.code.lianyouapp.com/app/blind-date-article/img/recommend.jpg',
              'http://fe.iyuedan.com/m/nearby/img/tools.png',
              'http://fe.iyuedan.com/m/nearby/img/renwu.png'
            ],
            current: 1
          }
        },
        computed: {
          real () {
              return [this.pics[this.pics.length - 1],...this.pics, this.pics[0]]
          }
        },
        methods: {
          getIndex (index) {
            if (this.current !== this.real.length - 2 ) {
              return index
            } else {
              return 1
            }
          },
          prev () {
            if (this.current !== 1) {
              this.current--
            } else {
              this.current = this.real.length - 3
            }
          },
          next () {
            if (this.current !== this.real.length - 3) {
              this.current++
            } else {
              this.current = 1
            }
          }
        }
    }
</script>

<style scoped lang="scss">
  @import "../../assets/css/mixin";
  .swiper-container{
    margin: 0 pxToRem(30);
    border: 1px solid #ccc;
    overflow: hidden;
  }
  .swiper-wrap{
    display: flex;
    align-items: center;
    .swiper-slide{
      width: pxToRem(417);
      height: pxToRem(225);
      display: none;
      transition: all .5s ease-in;
    }
    .swiper-slide-active{
      width: pxToRem(417 * 1.2);
      height: pxToRem(225 * 1.2);
      display: block;
      margin-left: pxToRem(-300);
    }
    .swiper-slide-active-slib{
      display: block;
    }
  }
  .prev-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding: pxToRem(30);
    border-radius: 50%;
    background: rgba(255,255,255, 0.4);
  }
  .next-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    padding: pxToRem(30);
    border-radius: 50%;
    background: rgba(255,255,255, 0.4);
  }
</style>
